<template>
  <div class="box">
    <header class="header">user header</header>
    <div class="content">
      <button @click="logout">退出</button>
    </div>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  // mapMutations 需要配合 mehtods 使用
  methods: {
    // 合并对象
    ...mapMutations({
      // key 代表在methods下生成一个同名的函数
      // value 代表就是 生成的同名函数内部执行了 this.$store.commit('changeLoginState'）
      changeLoginState: 'changeLoginState'
    }),
    // changeLoginState (val) {
    //   this.$store.commit('changeLoginState', val)
    // },
    logout () {
      localStorage.removeItem('isLogin')
      localStorage.removeItem('userid')
      localStorage.removeItem('token')
      // this.$store.commit('changeLoginState', false)
      this.changeLoginState(false)
      this.$router.replace('/login')
    }
  }
}
</script>
